<template>
	<div>
		<el-form ref="form" :model="form" label-width="100px">
			<el-form-item label="是否离线库" prop="offline">
				<el-radio-group v-model="form.offline" @change="changeOffline">
					<el-radio label="1" border>yes</el-radio>
					<el-radio label="2" border>no</el-radio>
				</el-radio-group>
			</el-form-item>
			<div v-if="form.offline == 1">
				<el-form-item label="推送方式">
					<el-radio-group v-model="pushMethod" @change="changeOffline">
						<el-radio label="1" border>人脸库推送</el-radio>
						<el-radio label="2" border>设备推送</el-radio>
					</el-radio-group>
				</el-form-item>
			</div>
			<div v-if="form.offline == 2 || pushMethod == 1">
				<el-form-item label="选择地址">
					<address-device v-if="isRefresh" :address="address_name" @getAddresses="getAddress">
					</address-device>
				</el-form-item>
				<div v-if="address_id">
					<el-form-item label="人脸组" prop="group">
						<div v-if="faceGroupList.length > 0">
							<el-radio-group v-model="form.group">
								<div v-for="(item, index) in faceGroupList" :key="index">
									<el-radio :label="item.group_name" border>{{item.group_name}}</el-radio>
								</div>
							</el-radio-group>
						</div>
						<div v-else>
							<el-radio :disabled="true" border>暂无人脸组选择</el-radio>
						</div>
					</el-form-item>
				</div>
			</div>
			<div v-if="pushMethod == 2">
				<el-form-item label="设备UUID">
					<search-device :uuid="form.uuid" @getChildUuid="getUuid">
					</search-device>
				</el-form-item>
			</div>
			<el-form-item>
				<el-button type="primary" @click="submitPush">立即推送</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	import API from '@/api/index.js'
	import SearchDevice from '@/components/form/device/search-device.vue'
	import AddressDevice from '@/components/form/device/address-device.vue'

	export default {
		components: {
			SearchDevice,
			AddressDevice
		},
		data() {
			return {
				isRefresh: true, // 刷新组件使用
				address_id: '', // 用于获取人脸组
				address_name: '', // 搜索人脸组的关键字
				faceGroupList: [],
				pushMethod: '1',
				form: {
					face_id: '',
					uuid: '',
					offline: '1',
					group: ''
				}
			}
		},
		created() {
			console.log(111)
			this.form.face_id = localStorage.getItem('face_id');
			this.form.group = localStorage.getItem('face_group');
		},
		methods: {
			// 获取uuid
			getUuid(data) {
				let self = this;
				self.form.uuid = data.uuid;
				console.log(self.form.uuid)
			},
			// 获取地址
			getAddress(data) {
				let self = this;
				console.log(data)
				self.address_id = data.address_id;
				self.faceGroupList = [];
				// 获取人脸组
				self.getFaceGroup();
			},
			// 获取人脸组
			getFaceGroup() {
				let self = this;
				API.addressGroups(self.address_id).then(res => {
					let data = res.data.data;
					self.faceGroupList = data;
				})
			},

			changeOffline() {
				let self = this;
				self.isRefresh = false;
				self.$nextTick(() => {
					self.form.uuid = '';
					self.form.group = '';
					self.address_id = '';
					self.address_name = '';
					self.isRefresh = true;
				})
			},

			submitPush() {
				let self = this;
				console.log(self.form)
				API.pushFace(self.form).then(res => {
					console.log(res)
					self.$message.success("推送成功");
					self.initForm();
				})
			},

			initForm() {
				let self = this;
				self.isRefresh = false;
				self.$nextTick(() => {
					self.address_id = ''; // 用于获取人脸组
					self.address_name = ''; // 搜索人脸组的关键字
					self.faceGroupList = [];
					self.pushMethod = '1';
					self.form = {
						face_id: localStorage.getItem('face_id'),
						uuid: '',
						offline: '1',
						group: ''
					};
					self.isRefresh = true;
				})
			}
		}
	}
</script>

<style>
</style>
